<template>
  <view class="normal-login-container">
    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section :title="title" type="line" />
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :model="ruleForm" labelWidth="auto" :label-position="boole ? 'top' : 'left'">
          <uni-forms-item label="车牌号:" name="carNo" :required="boole" :rules="[{ required: true, errorMessage: '请选择车牌号', validateTrigger: 'bind' }]">
            <text class="carNo" />
            <uni-easyinput type="text" v-if="boole" v-model="ruleForm.carNo" @focus="handleFocus" :readonly="true"
                           @clear="clear"
                           ref="refUniEasyinput"
                           :placeholder="placeholder" />
            <text v-else>{{ ruleForm.carNo || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车架号:">
            <uni-easyinput v-model="ruleForm.vinNo" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.vinNo || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="品牌:">
            <uni-easyinput v-model="ruleForm.brandName" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.brandName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车系:">
            <uni-easyinput v-model="ruleForm.seriesName" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.seriesName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车型:">
            <uni-easyinput v-model="ruleForm.modelName" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.modelName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆产权城市:">
            <uni-easyinput v-model="ruleForm.propertyRightName" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.propertyRightName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆运营城市:">
            <uni-easyinput v-model="ruleForm.operationsName" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.operationsName || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="车辆归属城市:">
            <uni-easyinput v-model="ruleForm.ascription" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.ascription || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="出库时间:">
            <uni-easyinput v-model="ruleForm.outStorageTime" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.outStorageTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="还车时间:">
            <uni-easyinput v-model="ruleForm.returnTime" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.returnTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="财务收款时间:">
            <uni-easyinput v-model="ruleForm.financialPassedTime" disabled v-if="boole" placeholder="请选择车辆后自动带出" />
            <text v-else>{{ ruleForm.financialPassedTime || '-' }}</text>
          </uni-forms-item>
        </uni-forms>
      </view>
    </view>

    <!--弹框-->
    <carPopup ref="refCarPopup" @change="change" />
  </view>
</template>

<script>
import carPopup from './carPopup.vue'

export default {
  name: 'carInformation',
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '申请信息',
    },
  },
  components: { carPopup },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', { ...target, [key]: value })
            return true
          },
        })
        return proxy
      },
    },
  },
  data() {
    return {
      placeholder:'系统根据车牌号/车架号自动获取'
    }
  },
  methods: {
    change(val) {
      if (!val) return
      for (let key in this.ruleForm) {
        this.ruleForm[key] = val[key]
        this.$set(this.value, key, val[key])
      }
    },

    clear(){
      this.$nextTick(_=>{
        this.placeholder = '系统根据车牌号/车架号自动获取'
      })
    },

    handleFocus() {
      this.$refs.refCarPopup.form.carNo = ''
      this.placeholder = ''
      this.$refs.refCarPopup.open('refUniEasyinput')
    },
  },
}
</script>

<style scoped lang="scss"></style>
